<template>
    <div class="wrapper-list">
        <div class="headers">
            <input type="text" placeholder="用户名" v-model="searchTitle" @keyup.native.enter="search"><button @click="search">搜索</button> <button @click="Reset">重置</button>

            <button @click="screenfull">全屏</button>


        </div>
        <table style="width:1500px" border="1">
            <tr style="text-align:center">
                <td>ID</td>
                <td>用户名</td>
                <td>账户余额</td>
                <td>头像</td>
                <td>地址</td>
                <td>状态</td>
                <td>注册时间</td>
                <td>操作</td>
            </tr>
            <tr style="text-align:center" v-for="(item,index) in currentPageDate" :key="index">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.money}}</td>
                <td>
                    <img :src="item.thumb" alt="">
                </td>
                <td>{{item.address}}</td>
                <td>{{item.state}}</td>
                <td>{{item.date}}</td>
                <td>
                    <button>删除</button>
                    <button @click="edit(item)">编辑</button>
                </td>
            </tr>
        </table>
        <div class="page">
          <ul>
            <li v-for="(item,index) in total" :key="index" @click="Pagechange(item)">{{item}}</li>
          </ul>
          <p>
            当前
            <input style="width:30px;" type="text" v-model="currentpage"  @input="MInMax">
            页
          </p>
          
        </div>
        
        <div class="model" v-show="show">
          <div class="x" @click="show=false">X</div>
          <div class="from">
              <p> <span>用户名：</span> <input type="text" v-model="editlist.name" @input="aaa"></p>
             <p>  <span>地址：</span><input type="text" v-model="editlist.address"></p>
          </div>
          <div class="btn">
            <button @click="yesEdit(this.editlist)">确定</button>
            <button  @click="show=false">取消</button>
          </div>
        </div>
    </div>
</template>

<script>
import {mapMutations} from 'vuex'
import screenfull from 'screenfull'
export default {
  data() {
    return {
      list: this.$store.state.list,
      searchTitle: "",
      show: false,
      editlist: {},
      //总页数
      total:1,
      //当前页数
      currentpage:1,
      //每页显示条数
      pageSize:2,
      //当前页显示的内容
      currentPageDate:[],
      isFullscreen: false,
      
    };
  },
  mounted() {
    this.total=Math.ceil(this.list.length/this.pageSize);
    console.log(this.total);
    this.total=this.total==0 ? 1 :this.total
    this.setCurrentpageData()
    window.onresize = () => {
      // 全屏下监控是否按键了ESC
      if (!this.checkFull()) {
        // 退出全屏后要执行的动作
        console.log('退出全屏')
        this.isFullscreen = screenfull.isFullscreen
      }
    }
  },
  methods: {
    ...mapMutations(['obtainlist','modify']),

    screenfull() {
      if (!screenfull.isEnabled) {
        this.$Message({
          message: 'Your browser does not support!',
          type: 'warning',
        })
        return false
      }
      // screenfull.toggle()
      screenfull.toggle(this.$refs.content)
      this.isFullscreen = true
    },

    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    },
    aaa(){
      console.log('123',this.editlist);
      console.log('1235555',this.list);
    },
    //搜索
    search() {
      if (this.searchTitle === "") {
        return alert('请输入搜索内容')
      }
      this.currentPageDate = this.list.filter(value => {
        return value.name.includes(this.searchTitle);
      });
    },
    //编辑
    edit(item) {
      this.show = true;
      this.obtainlist(item)
      this.editlist=this.$store.state.editlist;
    },
    yesEdit(list){
      this.modify(list)
    },
    //分页
    setCurrentpageData(){
        let begin = (this.currentpage-1) * this.pageSize;
        let end =this.currentpage * this.pageSize;
        this.currentPageDate=this.list.slice(begin,end)
    },
    //重置
    Reset(){
      this.searchTitle=''
      this.setCurrentpageData()
    },
    //点击每页进行换页
    Pagechange(item){
      console.log(item);
      this.currentpage=item
      this.setCurrentpageData()
    },
    MInMax(){
      console.log('111');
      if(this.currentpage===''){
        return;
      }
      if(this.currentpage<=0){
        this.currentpage=1
      }
      if(this.currentpage>Math.ceil(this.list.length/this.pageSize)){
        this.currentpage=Math.ceil(this.list.length/this.pageSize)
      }
      this.setCurrentpageData()
    }
  },
  computed: {
    
  }
};
</script>

<style lang="scss" scoped>
.wrapper-list {
  width: 100%;
  height: 100%;
  position: relative;
  .headers {
    input {
      width: 300px;
      height: 50px;
      font-size: 20px;
    }
    button {
      width: 80px;
      height: 50px;
      margin-left: 20px;
      border: 0px;
      background: rgb(9, 157, 243);
      border-radius: 5px;
    }
  }
  .page{
    width: 100%;
    height: 50px;
   
    overflow: hidden;
    ul{
      list-style: none;
     margin-top: 15px;
      li{
        float: left;
        display: inline-block;
        width: 30px;
        background: skyblue;
        margin-left: 20px;
        text-align: center;
        border-radius: 5px;
      }
    }
  }
  .model {
    width: 400px;
    height: 400px;
    background: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    .btn{
      width: 100%;
      text-align: center;
      margin-top: 30px;
      button{
        width: 60px;
        height: 30px;
        margin: 10px;
        border: 0px;
        background: skyblue;
        color: white;
      }
    }
    .x{
      float: right;
      font-size: 20px;
      margin-right: 20px;
      margin-top: 20px;
    }
    .from{
      width: 100%;
      margin-top: 50px;
      text-align: center;
      p{
        margin-top: 20px;
        input{
          height: 20px;
        }
        span{
          width: 70px;
          display: inline-block;
       }
      }
    }
  }
  tr {
    img {
      width: 60px;
    }
  }
  table{
    border-collapse: 0;
    border-spacing: 0;
  }
}
</style>